<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="./lib/themes/metro/easyui.css" />
    <link rel="stylesheet" href="./lib/themes/icon.css" />
</head>
<body>
    <div id="app" >
        <ko-dialogs id="dialogs">
        </ko-dialogs>
        <ko-dialog>            
            <div>我来做测试，这是对话框架内见的</div>
            <ko-textbox params="options:{value:value}" ></ko-textbox>
        </ko-dialog>
        <button data-bind="click:add">添加dialog</button>
        <button data-bind="click:addComp">添加组件</button>
    </div>
    <script src="./lib/jquery.min.js"></script>
    <script src="./lib/jquery.easyui.min.js"></script>
    <script src="./lib/locale/easyui-lang-zh_CN.js"></script>
    <script src="./lib/knockout-3.5.0.js" ></script>
    <script src="/koeasyui.js"></script>
    <script>
        koeasyui.use(window.ko);
        var i = 0;
        var rootVm={
            value: ko.observable('aaaa'),
            add:function(){
                var $dialogs = koeasyui.getContextFor(document.getElementById('dialogs'));       
                $dialogs.addDialog({ content: "index:" + i++ });
            },
            addComp:function(){
                var $dialogs = koeasyui.getContextFor(document.getElementById('dialogs')); 
                $dialogs.addDialog({
                    width: 600,
                    height: 400,
                    content: '<ko-textbox params="options:{value:val}" ></ko-textbox><button data-bind="click:beforeMount" ></button>',
                    onBeforeOpen:function(){
                        console.log('opt onBeforeOpen');
                    },
                    viewModel: { //生命周期无效
                        val: ko.observable('test'),
                        beforeMount:function(){
                            debugger;
                        }
                    }
                });
            }
        };
        ko.applyBindings(rootVm, document.getElementById('app'));
    </script>
</body>
</html>